<template>
  <div class="vertical" ref="container">
    <div class="resize-box-vertical" :style="{ height: topHeight + 'px' }">
      <div class="content">
        <slot name="content"></slot>
      </div>
    </div>
    <div class="resize-handle" @touchstart="startResize" @touchmove="resize" @touchend="endResize"></div>
    <div class="resize-box-bottom">
      <slot name="content2"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const container = ref<HTMLElement | null>(null);
const topHeight = ref(300); // 初始高度
const minHeight = 100; // 最小高度
const maxHeight = ref(0); // 最大高度，将在 onMounted 中设置
let startY = 0;
let startHeight = 0;
let isResizing = false;

onMounted(() => {
  if (container.value) {
    maxHeight.value = container.value.clientHeight * 0.6; // 设置最大高度为容器高度的 60%
  }
});

const startResize = (e: TouchEvent) => {
  isResizing = true;
  startY = e.touches[0].clientY;
  startHeight = topHeight.value;
};

const resize = (e: TouchEvent) => {
  if (!isResizing) return;
  const deltaY = e.touches[0].clientY - startY;
  let newHeight = startHeight + deltaY;
  
  // 限制高度在最小值和最大值之间
  newHeight = Math.max(minHeight, Math.min(newHeight, maxHeight.value));
  
  topHeight.value = newHeight;
};

const endResize = () => {
  isResizing = false;
};
</script>

<style scoped>
.vertical {
  overflow: hidden;
  background: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.resize-box-vertical {
  position: relative;
  overflow: hidden;
}

.resize-box-bottom {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.content {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.resize-handle {
  height: 20px;
  background-color: #ddd;
  cursor: row-resize;
  touch-action: none;
}

.resize-handle:active,
.resize-handle:hover {
  background-color: skyblue;
}
</style>